@charset "UTF-8";
/**
 * 
 * @authors 3pixel (kermit@piexl.net)
 * @date    2017-11-30 12:01:00
 * @version v0.0.1
 */
//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";


//目的地介绍
.des-introduce{
	background-color:@red;
	padding:70px 0;
	font-size:18px;
	line-height:2;
	color:#fff;
	.introduce-inner{
		max-width:900px;
		margin:0 auto;
		position:relative;
		&::before{
			content:"\e603";
			line-height:1;
			display:block;
			position:absolute;
			top:-0.2em;
			left:-1.2em;
			font-size:40px;
			font-family:"iconfont" !important;
		}
		&::after{
			content:"\e602";
			line-height:1;
			display:block;
			position:absolute;
			bottom:-0.2em;
			right:-1.2em;
			font-size:40px;
			font-family:"iconfont" !important;
		}
	}
	@media screen and (max-width:1024px){
		padding:50px;
		font-size:16px;
		.introduce-inner{
			&::before{font-size:30px;}
			&::after{font-size:30px;}
		}
	}
	@media screen and (max-width:768px){
		font-size:14px;
		.introduce-inner{
			&::before{font-size:26px;}
			&::after{font-size:26px;}
		}
	}
}

//目的地列表
.destination-list-box{
	padding-top:87px;
	padding-bottom:87px;
	@media screen and (max-width:1366px){padding-top:80px;padding-bottom:80px;}
	@media screen and (max-width:1024px){padding-top:70px;padding-bottom:70px;}
	@media screen and (max-width:768px){padding-top:0;padding-bottom:0;}
}
.destination-list{
	.item{
		@itemHeight:350px;
		width:100%;
		padding-left:370px;
		margin-bottom:76px;
		position:relative;
		height:@itemHeight;
		.item-img{
			max-width:500px;
			display:block;
			position:absolute;
			top:-25px;
			left:0;
		}
		.text-area{
			height:@itemHeight;
			padding-left:130px;
			background-color:#fff;
  			box-shadow: 0px 5px 21.6px 2.4px rgba(46, 46, 46, 0.1);
			.text-area-inner{
				padding:36px 50px;
			}
		}
		.title{
			font-size:32px;
			line-height:1;
			margin-bottom:0.7em;
			color:#181716;
			font-weight:normal;
			.text-overflow();
		}
		.describe{
			font-size:16px;
			line-height:1.75em;
			color:#666;
			.text-overflow-lines(4, 1.75em);
		}
		.tags{
			padding-top:1em;
			font-size:16px;
			.line{
				font-style:normal;
				padding:0 0.5em;
			}
		}
		.link-box{padding-top:0.5em;}
	}
	@media screen and (max-width:1270px){
		.item{
			@itemHeight:230px;
			width:100%;
			padding-left:250px;
			margin-bottom:50px;
			height:@itemHeight;
			.item-img{
				width:330px;
				top:-20px;
			}
			.text-area{
				height:@itemHeight;
				padding-left:80px;
				.text-area-inner{
					padding:30px 40px;
				}
			}
			.title{font-size:28px;}
			.describe{
				.text-overflow-lines(2, 1.75em);
			}
			.tags{font-size:14px; padding-top:0.5em;}
		}
	}
	@media screen and (max-width:1024px){
		.item{
			width:100%;
			padding-left:250px;
			margin-bottom:50px;
			height:auto;
			.item-img{
				width:330px;
				top:-20px;
			}
			.text-area{
				height:auto;
				padding-left:80px;
				.text-area-inner{
					padding:30px 40px;
				}
			}
			.title{font-size:28px;}
			.describe{
				.text-overflow-lines(2, 1.75em);
			}
		}
	}
	@media screen and (max-width:768px){
		padding:87*@rpx 0;
		.item{
			width:100%;
			padding-left:0;
			margin-bottom:50*@rpx;
			.item-img{
				position:static;
				width:100%;
				max-width:none;
				//margin-left:-20px;
				img{width:100%;}
			}
			.text-area{
				padding-left:0;
				padding-top:60px;
				margin-top:-60px;
				.text-area-inner{
					padding:36*@rpx 40*@rpx;
				}
			}
			.title{font-size:28px;}
			.describe{
				.text-overflow-lines(2, 1.75em);
			}
			.tags{
				padding:1em 0;
			}
			.route-price{
				.price{font-size:30px;}
				.small{font-size:14px;}
			}
		}
	}
}

.com-page-banner{
	background:url(../images/example/destination_banner.jpg) no-repeat center center;
	background-size:cover;
}

//相关航线
.com-route{
	background:#efefef url(../images/destination_detail_bg.jpg) no-repeat center bottom;
	.route-list{
		padding-top:40px;
	}
}


